<template>
	<view class="my">
		<view class="bar"></view>
		<view class="top-info">
			<u-image class="sao-img" src="@/static/offline/my/sao.png" mode="" width="35rpx" height="35rpx" @click="getCode"></u-image>
			<view class="code-img">
				<u-image  src="@/static/offline/my/code.png" mode="" width="35rpx" height="35rpx"  @click="getPayCode('/pages/offline/my/merchantCode')"></u-image>
				<u-image  src="@/static/offline/my/setting.png" mode="" width="35rpx" height="35rpx" style="margin-left: 20rpx;"  @click="toInfo('/pages/offline/my/setting')"></u-image>
			</view>
			<view class="base-info">
				<view class="u-flex u-font-32">
					<view class="user-box">
						<u-image style="border-radius: 50%;overflow: hidden;" src="@/static/my/shang.jpg" mode="" width="126rpx" height="126rpx"></u-image>
						<u-image v-show="!accountState" style="margin-top: -12rpx" src="@/static/my/account-1.png" mode="" width="108rpx" height="33rpx"></u-image>
						<u-image v-show="accountState" style="margin-top: -12rpx" src="@/static/my/account-2.png" mode="" width="108rpx" height="33rpx"></u-image>
					</view>
					<view class="u-flex-1" style="min-width:0">
						<view style="min-width:0" class="bus-name u-font-32 u-line-1">{{sellerName}}</view>
						<view class="u-flex level">
							<view class="u-font-24 level-text" @click="changeRole">
								{{type}}
								<u-image class="level-img" src="@/static/my/icon-around.png" mode="" width="30rpx" height="30rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between base-info-other">
				<view class="u-flex-1">
					<!-- <view>账户糖果余额(颗)</view> -->
					<view class="u-flex u-col-center">
						<view class="margin-r">
							<!-- {{ showSweetRemainder?count : '*******'}} -->
							<view v-for="(item,index) in count" class="">
								{{item}}
							</view>
						</view>
						<!-- <image v-show="showSweetRemainder" src="@/static/my/eye.png" style="width:36rpx;height:28rpx" @click="showSweetRemainder = false"></image> -->
						<!-- <image v-show="!showSweetRemainder" src="@/static/my/off-eye.png" style="width:40rpx;height:16rpx" @click="showSweetRemainder = true"></image> -->
					</view>
				</view>
				<view class="base-info-btn" @click="toSweetChange">划转</view>
			</view>
		</view>
		<view class="meun-list">
			<view class="cell-content" v-for="(item, index) in MY_MENU" :key="index" :style="[{height: item.show ? `${(item.children.length + 1) * 108}rpx` : '108rpx',transition:'height .5s'}]">
				<view class="group-title u-flex" @click="item.show = !item.show">
					<view class="u-flex-1">
						{{item.name}}
					</view>
					<u-icon name="arrow-down" :style="[{transform: item.show ? 'rotate(-180deg)' : 'rotate(0)',transition:'transform .5s'}]"></u-icon>
				</view>
				<!-- :class="[item.show?'anim-open': 'anim']" -->
				<div  class="cell-box">
					<u-cell-item :title="child.name"  v-for="(child, childIndex) in item.children" :key="childIndex" :border-bottom="false" @click="toInfo(child.href)">
						<view slot="icon">
							<u-image style="margin-right: 20rpx;" :src="child.icon_url" width="54rpx" height="54rpx"></u-image>
						</view>
					</u-cell-item>
				</div>
			</view>
		</view>
	</view>
</template>
<script>
import aes from '../../../common/crypto-js/aes.js'
import CryptoJS from '../../../common/crypto-js/crypto-js.js'
// import CryptoJS from 'crypto-js'
import constData from './data.js'
export default {
	data() {
		return {
			sellerName: '',
			showSweetRemainder: true,
			count: [],
			accountState: '', // 商户状态
			mid: '',
			MY_MENU: constData.MY_MENU,
			type: '',
			re: ''
		}
	},
	onLoad() {
		// let word = 'eab1de2666d97f148376f53fc7c661bd6c64e97b767dffdce21c7843a09d6f78c805846fa81c6bd718125dc60e0d7129c0f9c378715c8d58da142ba543f8df86'
		// let url = this.decrypt(word);
		// let code = ''
		// if (typeof url == 'string') {
		// 	code = JSON.parse(url).code
		// 	console.log(JSON.parse(url))
		// } else {
		// 	code = url.code
		// }
		// uni.navigateTo({
		// 	url: '/pages/offline/my/writeOff?code=' + code
		// })
		let roleType = uni.getStorageSync('type');
		this.type = roleType == 1 ? '线上商家' : '线下商家';
		this.mid = uni.getStorageSync('mid');
		this.sellerName = uni.getStorageSync('merShortName');
		this.getSweet();
	},
	onPullDownRefresh() {
		this.getSweet();
	},
	methods: {
		getPayCode(url) {
			this.$u.offlineApi.merchantInfo().then(res => {
				if (res.code == 0) {
					if (res.data.authorizeProfitSharingStatus == 1) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.showToast({
							icon:'none',
						    title: '商家收款码权限未开通，请联系客服。'
						});
					}
				}
			})
		},
		// ase解密
		decrypt (word) {
			// "code":"6625337321","mid":19,"type":10,"url":""
			let key = CryptoJS.enc.Utf8.parse('EAED474DDD1441216F35109A56E52B97');
		   let iv = CryptoJS.enc.Utf8.parse('2zcv39vb69sl85ah');
		   let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
		   let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
		   let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
		   let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
		   return decryptedStr.toString();
		},
		getCode() {
			let _this = this;
			uni.scanCode({
				onlyFromCamera: true,
			    success: function (res) {
					console.log('res', res)
					let url = _this.decrypt(res.result);
					let code = ''
					if (typeof url == 'string') {
						code = JSON.parse(url).code
						console.log(JSON.parse(url))
					} else {
						code = url.code
					}
					uni.navigateTo({
						url: '/pages/offline/my/writeOff?code=' + code
					})
			        console.log('条码类型：' + res.scanType);
			        console.log('条码内容：' + res.result);
			    },
				fail:function (res) {
					console.log('res', res)
				}
			});
		},
		changeRole() {
			uni.reLaunch({
			    url: '/pages/rols/index'
			});
		},
		// 获取剩余糖果
		getSweet() {
			this.$u.offlineApi.getSweet().then(res=>{
				if(res.code == 0){
					this.count = res.data.split(',') || [];
				}else{
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		},
		toSweetChange() {
			uni.navigateTo({
				url: `/pages/offline/my/sweetChange`
			})
		},
		toInfo(url) {
			uni.navigateTo({
				url: url
			})
		},
		
	}
}
</script>
<style scoped>
	.cell-box {
		position: absolute;
		width: 100%;
		top: 53px;
	}
	.bar {
		padding-top: var(--status-bar-height);
		background-color: #357CD4;
	}
	.top-info {
		position: relative;
		margin-bottom: 30rpx;
		padding: 60rpx;
		height: 482rpx;
		width: 100%;
		background-image: url('@/static/offline/my/bg2.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		color: #FFFFFF;
	}
	.u-font-32 {
		font-size: 32rpx;
	}
	.u-font-24 {
		font-size: 24rpx;
	}
	.margin-r {
		margin-right: 10rpx;
		margin-top: 8rpx;
	}
	.base-info {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.bus-name {
		margin-bottom: 20rpx;
	}
	.level {
		position: relative;
		
	}
	.level-img {
		position: absolute;
		right: 18rpx;
		top: 6rpx;
	}
	.level-text {
		position: relative;
		margin-left: 15rpx;
		padding: 6rpx 60rpx 6rpx 8rpx;
		background-color: #1B61E5;
		border-radius: 17rpx;
	}
	.margin-r {
		margin-right: 10rpx;
	}
	.base-info-other {
		line-height: 48rpx;
	}
	.base-info-btn {
		margin-top: 20rpx;
		width: 139rpx;
		height: 50rpx;
		border: 2rpx solid #A4C2E8;
		border-radius: 10rpx;
		text-align: center;
	}
	.meun-list {
		margin: 0 30rpx 30rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		box-shadow: 0px 0px 6px 4px rgba(180, 178, 178, 0.2);
	}
	.cell-content{
		position: relative;
		box-sizing: border-box;
		
		overflow: hidden;
		border-top: 1rpx solid rgba(180, 178, 178, 0.2);
		border-right: 1rpx solid rgba(180, 178, 178, 0.2);
		border-left: 1rpx solid rgba(180, 178, 178, 0.2);
		border-bottom: 0;
	}
	.group-title {
		position: relative;
		font-size: 28rpx;
		padding: 26rpx 30rpx;
		font-size: 28rpx;
		line-height: 54rpx;
	}
	.group-title::before {
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -7px;
		content: '';
		width: 7rpx;
		height: 28rpx;
		background-color: #2D77D2;
		
	}
	.user-box {
		position: relative;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.sao-img {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
	}
	.code-img {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		display: flex;
		align-items: center;
	}
</style>
